<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>欢迎使用</title>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
</head>
<body>

<!-- 顶部导航栏 -->
<div class="layui-row">
    <ul class="layui-nav">
        <li class="layui-nav-item"><a href="/bookshop/indexPage">主页</a></li>
        <li class="layui-nav-item layui-this"><a href="/bookshop/carPage">购物车</a></li>
        <li class="layui-nav-item " style="float: right; "><a href="/login/logoutPage">退出</a></li>
        <li class="layui-nav-item" style="float: right; "><a onclick="editUserInfo()"><img src="/images/image.jpg" class="layui-nav-img"></a></li>
    </ul>
</div>

<div class="layui-row">
    <div style="height: 85vh; ">
        <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
    </div>
</div>


<!-- 头部工具栏 -->
<script type="text/html" id="toolbar" lay-filter="toolbar">
    <div class="layui-btn-container" style="font-size: unset; ">
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" id="bookName" autocomplete="off" class="layui-input" placeholder="输入书名搜索">
                </div>
            </div>
            <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="search" style="margin-bottom: 7px; "><i
                    class="layui-icon">&#xe615;</i>搜索
            </button>
        </div>
    </div>
</script>

<!-- 数据表格侧面工具栏 -->
<script type="text/html" id="operationBar">
    <a class="layui-btn layui-btn-xs" lay-event="addOne">加一</a>
    <a class="layui-btn layui-btn-xs" lay-event="reduceOne">减一</a>
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="pay">支付</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="orderFlagTypeTpl">
    {{#  if(d.orderFlag === '0'){ }}
    <span style="color: red;">未支付</span>
    {{#  } else { }}
    <span style="color: green;">已支付</span>
    {{#  } }}
</script>

<script src="/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" th:inline="none">
    layui.use(['element','layer','laypage','table'], function(){
        let element = layui.element;
        let layer = layui.layer;
        let laypage = layui.laypage;
        let table = layui.table;

        table.render({
            elem: '#dataTable'
            ,toolbar: '#toolbar' //开启头部工具栏
            ,height: 'full-100'
            , method: "POST"
            , contentType: "application/json;charset=UTF-8"
            ,request: {
                pageName: 'currentPage' //页码的参数名称，默认：page
                ,limitName: 'limitCount' //每页数据量的参数名，默认：limit
            }
            ,url:'/bookshop/getCarData'
            ,cols: [[
                {field:'id', hide:true}
                ,{field:'userName', width:'20%', title: '用户'}
                ,{field:'bookName', width:'20%', title: '书名'}
                ,{field:'bookNumber', width:'20%', title: '数量'}
                ,{field:'orderFlag', width:'20%', title: '状态', templet:'#orderFlagTypeTpl', sort: true}
                ,{fixed: 'right', title:'操作', toolbar: '#operationBar'}
            ]]
            ,page: true
            ,limit: 20
        });

        //行工具事件
        table.on('tool(dataTable)', function(obj){
            let id = obj.data.id;
            let layEvent = obj.event;
            let bookId = obj.data.bookId;
            if(layEvent === 'del'){
                //删除
                layer.confirm('确定要删除该书么？', {
                    btn: ['确定','取消']
                }, function(){
                    //确认删除
                    $.ajax({
                        type: "POST",
                        url: '/bookshop/deleteCar?id=' + id,
                        contentType: "application/json",
                        success: function (data) {
                            if(data === 'success'){
                                layer.msg("删除成功");
                                setTimeout(function(){
                                    //延时两秒后刷新跳转
                                    window.location = "/bookshop/carPage";
                                },2*1000);
                            }else{
                                layer.msg("发生错误，删除失败!")
                            }
                        }
                    });
                });
            }else if(layEvent === 'addOne'){
                //加一本
                $.ajax({
                    type: "POST",
                    url: '/bookshop/addOne?id=' + id,
                    contentType: "application/json",
                    success: function (data) {
                        if(data === 'success'){
                            window.location = "/bookshop/carPage";
                        }else{
                            layer.msg("发生错误，删除失败!")
                        }
                    }
                });
            }else if(layEvent === 'reduceOne'){
                //减一本
                $.ajax({
                    type: "POST",
                    url: '/bookshop/reduceOne?id=' + id,
                    contentType: "application/json",
                    success: function (data) {
                        if(data === 'success'){
                            window.location = "/bookshop/carPage";
                        }else{
                            layer.msg("发生错误，删除失败!")
                        }
                    }
                });
            }else if(layEvent === 'pay'){
                //减一本
                $.ajax({
                    type: "POST",
                    url: '/bookshop/pay?' + '&id=' + id + '&bookId=' + bookId,
                    contentType: "application/json",
                    success: function (data) {
                        if(data === 'success'){
                            layer.msg("支付成功");
                            setTimeout(function(){
                                //延时两秒后刷新跳转
                                window.location = "/bookshop/carPage";
                            },2*1000);
                        }
                        else if(data === 'false'){
                            layer.msg("库存不足!")
                        }
                        else if(data === 'finish'){
                            layer.msg("已支付过，请勿重复操作!")
                        }
                        else{
                            layer.msg("发生错误，删除失败!")
                        }
                    }
                });
            }
        });

        //头工具栏事件
        table.on('toolbar(dataTable)', function (obj) {
            if (obj.event === 'search') {
                table.reload("dataTable", {
                    where: {
                        "bookName": $('#bookName').val()
                    }
                });
            }
        });

        //刷新标志
        let refreshFlag = false;
        setRefreshFlag = function(flag){
            refreshFlag = flag;
        };

        //修改用户信息
        editUserInfo = function (){
            $.ajax({
                type: "POST",
                url: '/login/getCurrentUser',
                contentType: "application/json",
                success: function (data) {
                    let obj = JSON.parse(data);
                    // $('#userNameLegend').text("当前登录者："+obj['userName'])
                    // alert(obj['userName']);
                    edit(obj['id']);
                }
            });
            edit = function (id){
                let index = layer.open({
                    type: 2,
                    content: "/manager/userForm",
                    area: ['800px', '200px'],
                    title: false,
                    closeBtn: 2,
                    maxmin: false,
                    success: function (layero) {
                        let body = layer.getChildFrame('body', index);
                        body.find('#id').val(id);
                    },
                    end: function () {
                        if (refreshFlag === true) {
                            window.location = "/bookshop/carPage"
                        }
                    }
                })
            }
        }
    });
</script>
</body>
</html>